<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrapper {
            width: 600px;
            height: 300px;
            border: 1px solid black;

            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: nowrap;
        }
        .content {
            width: 200px;
            height: 100px;


            border: 1px solid #0f0;
            box-sizing: border-box;
            /* 这两个属性的设置会影响压缩的比例 */

            /* flex-grow: 1; */
            /* 当长度溢出时，不会再伸，只会缩，设置了flex-grow也没用 */
            flex-shrink: 1;
            /* 也会按设置的比例进行缩，但是缩的公式很复杂 */
            
        }

        /* 
            缩的公式：（也就是让长的盒子多缩）
            200px*1 + 200px*1 + 400px*3 = 1600px

            这里的计算公式的200 200 400 是盒子的内容区的宽度，不是盒子总宽度
            所以设置完 border 或者 box-sizing 会影响下面计算的比例
            设置完border：
            198px*1 + 198px*1 + 398px*3 = ---

            第一个盒子压缩：
                 比例          多出来的
            200px*1 / 1600px * 200px = 25px
            第三个盒子压缩：
            400px*3 / 1600px * 200px = 150px
         */

        /* 上面的公式换成flex-basis也是一样的，首先会根据flex-basis以及设置的width计算出真实盒子的宽度 */

        .content:last-child {
            flex-shrink: 3; 
            width: 400px;
        }


    </style>




</head>
<body>
    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>

    </div>
</body>
</html>